<script setup lang='ts'>
import { ref } from 'vue';
import { poiExtPropObj } from '@/common/MapTypes';

const container = ref<HTMLElement | null>(null)

const active = ref(false)

// const props = defineProps(poiPropObj)
const props = defineProps(poiExtPropObj)
const emits = defineEmits(['click'])

function handleClick() {
  emits('click', {
    container: container.value?.parentNode,
    poi: props,
    setActive(b: boolean) {
      active.value = b
    }
  })
}

</script>

<template>
  <div class='marker-content__container' :class="{ active }" :latitude="latitude" :longitude="longitude" ref="container"
    @click="handleClick">

    <uv-icon class="camera" name="camera-fill" size="20" color="#D81E06"></uv-icon>
    <image class="image" src="/static/flag_1.svg" mode="scaleToFill" />

  </div>
</template>

<style scoped lang='scss'>
.marker-content {
  &__container {
    position: relative;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;

    .close {
      position: absolute;
      bottom: -46rpx;
      left: 22rpx;
    }

    .image {
      width: 96rpx;
      height: 96rpx;
    }

    .camera {
      position: absolute;
      left: 32rpx;
      top: 10rpx;
    }
  }

}

.active {
  .camera {
    left: 46rpx;
    top: 20rpx;
  }

  .image {
    width: 64px;
    height: 64px;
  }
}
</style>